<template>
	<div class="modify-dialog">
		<!-- <el-button size="small" type="primary" @click="showDialog()">
			新建产品
		</el-button> -->
		<el-dialog :close-on-click-modal="false" v-bind="dialogOpts" :visible.sync="dialogVisible" width="650px">
			<Form v-bind="formOpts" v-on="formEvent">
				<template #formBtn>
					<el-form-item label="产品缩略图（可多选）" style="width: 100%">
						<el-upload
							multiple
							class="uploader-wrap"
							:headers="headers"
							:action="`${$apiHost}/common/fileImgUrl`"
							:on-success="onSuccess"
							:show-file-list="false"
						>
							<el-button size="small" type="primary">点击上传</el-button>
							<template #tip>
								<div class="img-wrap">
									<el-image
										v-for="(item, index) in preImgs"
										:key="index + item"
										:src="item"
										:preview-src-list="[item]"
										class="img-item"
										fit="cover"
									>
									</el-image>
								</div>
							</template>
						</el-upload>
					</el-form-item>
					<div class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="onConfirm"> 确 定 </el-button>
					</div>
				</template>
			</Form>
		</el-dialog>
	</div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";
export default {
	mixins: [modifyMixins],
	data() {
		return {
			productImgs: [],
			inline: true,
			labelPosition: "right",
			form: {
				productCode: {
					tag: "el-input",
					label: "产品编码",
					value: "",
					props: {
						clearable: true,
						placeholder: "请输入产品编码",
					},
				},
				productName: {
					tag: "el-input",
					label: "配件名称",
					value: "",
					props: {
						clearable: true,
						placeholder: "请输入配件名称",
					},
				},
				norms: {
					tag: "el-input",
					label: "规格",
					value: "",
					props: {
						clearable: true,
						placeholder: "请输入规格",
					},
				},
				unit: {
					tag: "el-input",
					label: "单位",
					value: "",
					props: {
						clearable: true,
						placeholder: "请输入单位",
					},
				},
				colour: {
					tag: "el-input",
					label: "颜色",
					value: "",
					props: {
						clearable: true,
						placeholder: "请输入颜色",
					},
				},
				directoryIds: {
					tag: "el-select",
					label: "套件",
					value: "",
					items: this.getDirectoryItem(),
					props: {
						clearable: true,
						filterable: true,
						multiple: true,
						collapseTags: true,
					},
				},
				price: {
					tag: "el-input-number",
					label: "单价",
					value: "",
					props: {
						min: 0,
						precision: 2,
						clearable: true,
						placeholder: "请输入单价",
					},
				},
				dosage: {
					tag: "el-input-number",
					label: "套件数量",
					value: "",
					props: {
						// min: 0,
						clearable: true,
						placeholder: "请输入套件数量",
					},
				},
				limit: {
					tag: "el-input-number",
					label: "库存告警阀值",
					value: "",
					props: {
						min: 0,
						clearable: true,
						placeholder: "请输入阀值",
					},
				},
				description: {
					tag: "el-input",
					label: "产品说明",
					value: "",
					props: {
						style: {
							width: "187px",
						},
						rows: 3,
						type: "textarea",
						clearable: true,
						placeholder: "请输入产品说明",
					},
				},
			},
		};
	},
	computed: {
		title() {
			return this.modify === "add" ? "新增产品" : "编辑产品";
		},
		preImgs() {
			return this.productImgs.map((e) => `${this.$imgHost}${e}`);
		},
		headers() {
			const token = this.token || this.$quinn.getStorage("token");
			return {
				token,
			};
		},
	},
	methods: {
		onSubmit(form) {
			const { modify, row, productImgs } = this;
			if (modify === "add")
				this.$api
					.addMaterial({
						...form,
						materialStatus: 1,
						productImgs,
					})
					.then(this.submitDoneMsg);
			else if (modify === "edit") {
				this.$api
					.updateMaterial({ ...form, productImgs, id: row.id })
					.then(this.submitDoneMsg);
			}
		},
		showDialog(modify = "add", row = {}) {
			this.dialogVisible = true;
			this.row = row;
			this.modify = modify || "add";
			for (const key in this.form) {
				let defValue = "";
				if (Array.isArray(this.form[key].value)) defValue = [];
				if (Object.hasOwnProperty.call(row, key))
					this.form[key].value = row[key] || defValue;
				else this.form[key].value = defValue;
			}
			this.formKey = this.$quinn.guid();
			this.form.directoryIds.value = (row.directorys || []).map((e) => e.id);
			this.productImgs = row.productImgs || [];
			// this.form.directoryIds.props.disabled = modify == "edit";
		},
		onSuccess(res) {
			const { productImgs = [] } = this;
			if (res.code == 200 && res.result) {
				productImgs.push(res.result[0]);
				this.productImgs = productImgs;
			}
		},
	},
};
</script>

<style lang="less" scoped></style>

